<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
      integrity="sha512-JobWAqYk5CSjWuVV3mxgS+MmccJqkrBaDhk8SKS1BW+71dJ9gzascwzW85UwGhxiSyR7Pxhu50k+Nl3+o5I49A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <!-- 正常走 -->
    <script type="module">
      import rollup0 from '../dist/es/index.js'
      console.log(rollup0, '===module1')
    </script>
    <!-- // TODO:这里有待考察，设置src后就不能再代码里标签里写代码了 -->
    <!-- <script type="module" src="../dist/es/bundle.esm.js"></script> -->
    <!-- <script type="module">
      import * as d from '../src/utils/throttle.js'
      console.log(d)
    </script> -->

    <!-- <script type="module">
      import * as t from '../dist/es/web/prettyConsole.js'
      console.log(t)
      setTimeout(() => {
        console.log((t.createPrettyLog.logColorMap.success = 'red'))
        const prettyLog = new t.createPrettyLog()
        prettyLog.info('info')
        prettyLog.error('error')
        prettyLog.warning('warning')
        prettyLog.success('success')
        prettyLog.success('test', '12312313')
        prettyLog.image(
          'https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0',
          0.15
        )
      }, 1000)
    </script> -->

    <script type="module">
      import * as t from '../dist/es/web/scrollAnimate.js'
      const { scrollUpOrDownWithAnimate } = t
      console.log(
        '🚀💥💥 ~ scrollUpOrDownWithAnimate: --》》',
        scrollUpOrDownWithAnimate
      )
      window.onload = function () {
        var scrollDiv = document.querySelector('#scrollEle')
        scrollDiv.scrollTo({
          top: 5000,
          behavior: 'smooth'
        })
        scrollDiv.addEventListener('scroll', (e) => {
          console.log(e.target.scrollTop)
        })
        setTimeout(() => {
          scrollUpOrDownWithAnimate({
            Ele: scrollDiv,
            // targetPosition:0,
            // step: 10,
            // spacingTime: 20,
            // isStopOnWheel: true,
            // isStopOnTouchMove: true,
            finish: () => {
              console.log(123)
            }
          })
        }, 3000)
      }
    </script>
    <!-- <script src="../dist/iife/bundle.iife.js"></script> -->
    <script>
      window.onload = function () {
        console.log(this.rollup0, '===iife')
        console.log(window, '===window')
      }
    </script>
    <style>
      .box-item {
        height: 40px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div
        class="box"
        style="
          background-color: #ccc;
          width: 500px;
          overflow: auto;
          height: 500px;
        "
        id="scrollEle"
      >
        <div class="scrollDiv" style="height: 10000px">
          <div class="box-item">1</div>
          <div class="box-item">2</div>
          <div class="box-item">3</div>
          <div class="box-item">4</div>
          <div class="box-item">5</div>
          <div class="box-item">6</div>
          <div class="box-item">7</div>
        </div>
      </div>
    </div>
  </body>
</html>
